<template>
    <div class="time">
        {{time | formatTime}}
    </div>
</template>
<script>
export default {
    name: 'TimeClock',
    data() {
        return {
            time: new Date()
        };
    },
    created() {
        var updateTime = () => {
            this.getNowDate();
            setTimeout(() => {
                updateTime();
            }, 1000);
        };
        updateTime();
    },
    methods: {
        getNowDate() {
            this.time = new Date();
        }
    },
    filters: {
        formatTime(val) {
            let text = window.moment(val).format('HH:mm:ss');
            return text;
        }
    }
};
</script>
<style scoped>
.time {
    padding: 0.1rem 0.2rem;
    background: url('../assets/img/bg-time.png');
    background-size: 100% 100%;
}
</style>
